<template>
  <div>
    <!-- 头部栏插件 -->
    <header-nav></header-nav>

    <!-- 轮播图 -->
    <div class="banner">
      <template>
        <el-carousel trigger="click" height="70vh">
          <el-carousel-item>
            <a href="">
              <img src="@/assets/img/index/banner/banner-1.jpeg" alt="" />
            </a>
          </el-carousel-item>
          <el-carousel-item>
            <a href="">
              <img src="@/assets/img/index/banner/banner-2.jpeg" alt="" />
            </a>
          </el-carousel-item>
          <el-carousel-item>
            <a href="">
              <img src="@/assets/img/index/banner/banner-3.jpeg" alt="" />
            </a>
          </el-carousel-item>
          <el-carousel-item>
            <a href="">
              <img src="@/assets/img/index/banner/banner-4.jpeg" alt="" />
            </a>
          </el-carousel-item>
          <el-carousel-item>
            <a href="">
              <img src="@/assets/img/index/banner/banner-5.jpeg" alt="" />
            </a>
          </el-carousel-item>
        </el-carousel>
      </template>
    </div>
    <!-- 通知滚动栏 -->
    <div class="notification">
      <i class="el-icon-close"></i>
      <template>
        <el-carousel
          height="200px"
          direction="vertical"
          indicator-position="none"
        >
          <el-carousel-item v-for="item in 3" :key="item">
            <i>
              <img src="../assets/img/index/speaker.png" alt="" />
            </i>
            <a class="medium">{{ item }}</a>
          </el-carousel-item>
        </el-carousel>
      </template>
    </div>
    <!-- 索引搜索 -->
    <div class="index-search">
      <div class="index-search-inner">
        <!-- 索引类型 -->
        <div class="index-search-type">
          <a href="">
            <i class="el-icon-box"></i>
            <p>立即下单</p>
          </a>
          <a href="">
            <i class="el-icon-pie-chart"></i>
            <p>时效查询</p>
          </a>
          <a href="">
            <i class="el-icon-map-location"></i>
            <p>网点查询</p>
          </a>
          <a href="">
            <i class="el-icon-sold-out"></i>
            <p>取货定位</p>
          </a>
        </div>
        <!-- 索引搜索框 -->
        <div class="search-box">
          <div class="off-status">
            <div class="search-type">
              <i class="el-icon-postcard"></i>
              运单追踪
            </div>
            <div class="off-status-line"></div>
            <div class="off-status-text">
              最多可支持20条运单号，多个运单以逗号或回车键隔开
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 运送服务 -->
    <div class="transport">
      <!-- 运送服务头部栏 -->
      <div class="title_bar">
        <span>时效明星产品</span>
        <a href="">
          更多产品
          <i class="el-icon-arrow-right"></i>
        </a>
      </div>
      <!-- 运送服务内容 -->
      <div class="transport-content">
        <div>
          <a href="">
            <img src="@/assets/img/index/transport/today.jpg" alt="" />
            <div class="content-hover">
              <p class="icon">
                <i class="el-icon-time"></i>
              </p>
              <p class="desc">时效精准 管家服务</p>
              <p class="more">
                了解更多
                <i class="el-icon-right"></i>
              </p>
            </div>
          </a>
          <div>
            <p>当天达</p>
            <p>最快8小时，专车取派</p>
          </div>
        </div>
        <div>
          <a href="">
            <img src="@/assets/img/index/transport/nextday.jpg" alt="" />
            <div class="content-hover">
              <p class="icon">
                <i class="el-icon-truck"></i>
              </p>
              <p class="desc">时效精准 性价比高</p>
              <p class="more">
                了解更多
                <i class="el-icon-right"></i>
              </p>
            </div>
          </a>
          <div>
            <p>次日达</p>
            <p>最快16小时，承诺24小时内送达</p>
          </div>
        </div>
        <div>
          <a href="">
            <img src="@/assets/img/index/transport/otherday.jpg" alt="" />
            <div class="content-hover">
              <p class="icon">
                <i class="el-icon-goods"></i>
              </p>
              <p class="desc">时效稳定 价格优惠</p>
              <p class="more">
                了解更多
                <i class="el-icon-right"></i>
              </p>
            </div>
          </a>
          <div>
            <p>隔日达</p>
            <p>最快36小时，最慢不超过48小时</p>
          </div>
        </div>
        <div>
          <a href="">
            <img src="@/assets/img/index/transport/landArrve.png" alt="" />
            <div class="content-hover">
              <p class="icon">
                <i class="el-icon-wallet"></i>
              </p>
              <p class="desc">性价比高 大票价更优</p>
              <p class="more">
                了解更多
                <i class="el-icon-right"></i>
              </p>
            </div>
          </a>
          <div>
            <p>陆运件</p>
            <p>全程可视化，时效稳定，价格更美丽</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 服务宗旨 -->
    <div class="index-service">
      <div class="service-container">
        <div class="service-person">
          <img src="@/assets/img/index/service/figure.png" alt="" />
        </div>
        <div class="service-list">
          <dl>
            <dt>
              <img src="@/assets/img/index/service/timeprotect.svg" alt="" />
            </dt>
            <dd class="title">时效保障</dd>
            <dd class="desc">跨省最快8小时 当天达</dd>
          </dl>
        </div>
      </div>
    </div>

    <!-- 底部栏插件 -->
    <footer-bar></footer-bar>
    <!-- <router-view /> -->
  </div>
</template>

<script>
// 引入头部栏、底部栏
import headerNav from '@/components/Header-nav.vue'
import footerBar from '@/components/Footer-bar.vue'
export default {
  components: { headerNav, footerBar },
}
</script>

<style lang="scss">
// 轮播图
.banner {
  .el-carousel__item {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  // 轮播图滚动栏
  .el-carousel__button {
    width: 32px;
    height: 6px;
  }

  .el-carousel__indicators--horizontal {
    bottom: 95px;
  }

  // 轮播图悬浮箭头
  .el-carousel__arrow {
    width: 55px;
    height: 74px;
    border-radius: 0;
    background-color: rgba(0, 0, 0, 0.3);
    &:hover {
      background-color: rgba(0, 0, 0, 0.7);
      opacity: 1;
    }
    > i {
      font-size: 28px;
    }
  }
}

// 通知滚动栏
.notification {
  width: 369px;
  height: 50px;
  line-height: 50px;
  background: #000;
  border-radius: 28px;
  opacity: 0.5;
  position: absolute;
  right: 66px;
  top: 130px;
  z-index: 2;
  .el-carousel__container {
    height: 50px !important;
  }
  > i {
    cursor: pointer;
    float: right;
    margin-right: 20px;
    margin-top: 17px;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border-radius: 50%;
  }

  .el-carousel__item {
    color: #000;
    font-size: 14px;
    opacity: 0.75;
    // line-height: 200px;
    margin: 0;
    border-radius: 28px;
    > i {
      margin: 17px 12px 0 20px;
      float: left;
    }
    > a {
      cursor: pointer;
      width: 265px;
      color: #fff;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

// 索引搜索
.index-search {
  color: #fff;
  .index-search-inner {
    width: var(--container-width);
    height: 146px;
    margin: -75px auto 0;
    position: relative;
    z-index: 5;
    background-color: #643789;
    display: flex;
    // 索引类型
    .index-search-type {
      a {
        display: inline-block;
        text-align: center;
        cursor: pointer;
        width: 126px;
        color: #ffffff;
        height: 146px;
        padding-top: 32px;
        i {
          font-size: 46px;
        }
        p {
          margin-top: 15px;
        }
        &:hover {
          background-color: #412459;
        }
      }
    }
    // 索引搜索框
    .search-box {
      margin-left: 20px;
      position: relative;
      .off-status {
        display: flex;
        align-items: center;
        width: 615px;
        height: 66px;
        line-height: 66px;
        margin-right: 30px;
        margin-top: 43px;
        background-color: #fff;
        .search-type {
          width: 145px;
          height: 30px;
          line-height: 30px;
          font-size: 22px;
          display: flex;
          color: #3a3249;
          i {
            font-size: 30px;
            margin-right: 10px;
            margin-left: 12px;
            vertical-align: middle;
          }
        }
        .off-status-line {
          width: 2px;
          height: 18px;
          margin-left: 10px;
          background: #3a3249;
          border-radius: 1px;
        }
        .off-status-text {
          color: #aaaaaa;
          font-size: 16px;
          display: inline-block;
          padding-left: 22px;
        }
      }
    }
  }
}

// 运送服务
.transport {
  width: var(--container-width);
  margin: 100px auto 0;
  // 运送服务头部栏
  .title_bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    > span {
      height: 53px;
      line-height: 53px;
      font-size: 38px;
      color: #333;
      margin-right: 70px;
    }
    > a {
      font-size: 22px;
      line-height: 22px;
      color: #333;
      cursor: pointer;
      i {
        margin-left: 20px;
        color: inherit;
        position: relative;
        top: -1px;
      }
    }
  }
  // 运送服务内容
  .transport-content {
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
    > div {
      width: 286px;
      > a {
        display: block;
        height: 380px;
        position: relative;
        overflow: hidden;
        &:hover .content-hover {
          opacity: 0.8;
          background: rgba(57, 18, 89, 0.8);
          > .icon {
            padding-top: 135px;
          }
        }
        img {
          max-width: 100%;
        }
        > div {
          width: 100%;
          height: 100%;
          text-align: center;
          position: absolute;
          left: 0;
          top: 0;
          transition: all linear 0.3s;
          opacity: 0;
          p {
            color: white;
          }
          .icon {
            padding-top: 220px;
            padding-bottom: 20px;
            transition: all ease-in-out 0.35s;
            i {
              font-size: 60px;
              line-height: 0;
            }
          }
          .desc {
            height: 130px;
            min-height: 130px;
          }
          .more {
            i {
              margin-left: 10px;
              font-size: 14px;
            }
          }
        }
      }
      > div {
        text-align: center;
        font-size: 24px;
        margin-top: 40px;
        color: #333;
        p:last-child {
          font-size: 16px;
          line-height: 26px;
          margin-top: 20px;
        }
      }
    }
  }
}

// 服务宗旨
.index-service {
  margin-top: 146px;
  background: #f5f5fa;
  .service-container {
    width: var(--container-width);
    height: 578px;
    margin: 0 auto;
    position: relative;
    .service-person {
      text-align: center;
      padding-top: 40px;
      position: absolute;
      left: 0;
      bottom: -3px;
    }
    .service-list {
      width: 720px;
      float: right;
      box-sizing: border-box;
      font-size: 15px;
      padding-top: 130px;
      dl {
        width: 180px;
        float: left;
        text-align: center;
        margin-bottom: 50px;
        dt {
          height: 72px;
          text-align: center;
          align-items: center;
          display: flex;
          justify-content: center;
        }
        .title {
          font-weight: bold;
          font-size: 18px;
          margin-top: 8px;
        }
        .desc {
          margin-top: 20px;
          font-size: 15px;
          color: #666;
        }
      }
    }
  }
}
</style>
